<template>
  <div class="divBox">
    <el-row :gutter="24">
      <el-col class="ivu-mb mb10 dashboard-console-visit">
        <el-card :bordered="false" dis-hover>
          <div slot="header">
            <div class="acea-row row-middle">
              <div class="header_title">所属行业</div>
            </div>
          </div>
          <div class="chart" id="chart3"></div>
<!--          <echarts-from ref="userChart" :echartsTitle="line" :xAxis="xAxis" :seriesData="series" v-if="infoList"></echarts-from>-->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  // import {getNum} from "@/utils/utils";
  import { chartUserApi, industryStatisticsApi } from '@/api/dashboard'
  import echarts from 'vue-echarts'
  import echartsFrom from '@/components/echarts/index';

  export default {
    name: 'user-chart',
    // components: {echartsFrom},
    data() {
      return {
        line: 'line',
        circle: 'circle',
        xAxis: [],
        infoList: {},
        series: [],
        xData: [],
        y1Data: [],
        y2Data: [],
        lists: [],
        bing_data: [],
        bing_xdata: [],

        legendData: [],
        seriesUser: [],
        chartBuy: {}
      }
    },
    methods: {
      industryStatistics() {
        industryStatisticsApi().then((res) => {
        }).catch((res) => {
          console.log(res)
        })
      },
      initChart3(){
        let charts = this.$echarts.init(document.getElementById('chart3'));
        charts.showLoading({
          text:'加载中',
          textColor:'#fff',
          maskColor:'rgba(0,0,0,0)'
        })
        let option = {
          xAxis: {
            type: 'category',
            data: ['水暖装修','保洁清洗','搬家运货','保姆陪护','电器维修','建筑装饰','电工家具','文体特长','物流运输'],
            axisLabel:{
              textStyle:{
                show:true,
                color: '#fff',
              }
            },
            axisTick:{
              show:false
            }
          },
          tooltip:{
            trigger:'axis',
            axisPointer:{
              type:'none'
            }
          },
          grid:{
            top:15,
            left:60,
            right:10,
            bottom:30
          },
          yAxis: {
            type: 'value',
            splitLine: {//分割线配置
              show:true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              }
            },
            axisLine:{
              show:true,
            },
            axisTick:{
              show:true,
            },
            axisLabel:{
              textStyle:{
                show:true,
                color: '#fff',
                fontSize:14
              }
            },
          },
          series: [
            {
              data: getNum(9,100,0),
              type: 'bar',
              barWidth:13,
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(17, 49, 119)',
                borderRadius:50
              },
              itemStyle: {
                normal: {
                  label:{
                    show:true,
                    position:'top',
                    textStyle:{
                      color:'#ccc',
                      fontSize:14
                    }
                  },
                  barBorderRadius:[15, 15, 15, 15],
                  color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                    offset:0,
                    color:'#2097FE'
                  },{
                    offset:1,
                    color:'#02CEF5'
                  }])
                }
              }
            }
          ]
        }
        charts.hideLoading();
        charts.setOption(option)
      },

      // 统计
      // getStatistics() {
      //   chartUserApi().then(async res => {
        //后期接口调用
        //   let res = {
        //     "09-24":9,"09-25":9,"09-26":15,"09-27":13,"09-28":7,"09-29":16,"09-30":29,"10-01":13,"10-02":6,"10-03":12,"10-04":7,"10-05":12,"10-06":17,"10-07":6,"10-08":29,"10-09":15,"10-10":17,"10-11":8,"10-12":19,"10-13":11,"10-14":39,"10-15":12,"10-16":13,"10-17":18,"10-18":16,"10-19":14,"10-20":14,"10-21":17,"10-22":20,"10-23":4,"10-24":5
        //   };

          // this.infoList = res
          // let data = []
          // for (let key  in res.countData) {
          //   data.push(res.countData[key])
          //   this.xAxis.push(key)
          // }
          // this.series = [
          //   {
          //     data: data,
          //     name: '人数（人）',
          //     type: 'line',
          //     tooltip: true,
          //     smooth: true,
          //     symbol: 'none',
          //     areaStyle: {
          //       normal: {
          //         opacity: 0.2
          //       }
          //     }
          //   }
          // ];
          // this.bing_data = res.bing_data; //本身注释
          // this.bing_xdata = res.bing_xdata; //本身注释
      //   })
      // },
      // 监听页面宽度变化，刷新表格
      // handleResize() {
      //   if (this.infoList && this.series.length !== 0) this.$refs.userChart.handleResize();
      //   if (this.infoList) this.$refs.visitChart.handleResize();
      // }
    },
    mounted() {
      this.initChart3()
      this.industryStatistics()
      // this.getStatistics();
    },
    beforeDestroy() {
      // if (this.visitChart) {
      //   this.visitChart.dispose();
      //   this.visitChart = null;
      // }
    }
  }
</script>

<style scoped lang="scss">
  .acea-row{
    ::v-deep.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  .header_title{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    padding-left:8px;
    position: relative;
    &::before{
      position: absolute;
      content: '';
      width: 2px;
      height: 18px;
      background: #1890FF;
      top:0;
      left:0;
    }
  }
  .ivu-pl-8{
    margin-left: 8px;
    font-size: 14px;
  }
  .dashboard-console-visit {
    ::v-deep.el-card__header{
      padding: 14px 20px !important;
    }
    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }

  .trees-coadd {
    width: 100%;
    height: 100%;
    .scollhide {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
    }
  }

  .scollhide::-webkit-scrollbar {
    display: none;
  }

  .names {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 84%;
    margin-bottom: -7px;
  }
</style>
